<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="660px" 
     @open="handleDialogOpen()" v-loading="loading">
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    
       <el-form :inline="true" :model="routerModel" :rules="formRules" ref="routerForm" 
      label-width="80px" label-position="right" size="small">
    <el-tabs v-model="activeName"  type="card" @tab-click="handleClick" >
    <el-tab-pane label="基本信息" name="first">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="filenumber" label="档案号">
            <el-input  :maxlength="50" v-model="routerModel.filenumber" autofocus></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="name" label="姓名">
            <el-input :maxlength="50" v-model="routerModel.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="sex" label="性别">
            <el-input :maxlength="50" v-model="routerModel.sex"></el-input>
          </el-form-item>          
        </el-col>
        <el-col :span="12">
          <el-form-item prop="age" label="年龄">
              <el-input :maxlength="50" v-model="routerModel.age"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="scheme" label="方案标题">
             <el-input :maxlength="50" v-model="routerModel.scheme"></el-input>
          </el-form-item>
        </el-col>
        选用模板
        <el-select v-model="value" placeholder="请选择">
         <el-option
           v-for="item in options"
           :key="item.id"
          :label="item.keyword"
           :value="item.id"
            @click.native="up(item.id)">
          </el-option>
         </el-select>
         </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="start" label="开始时间">
             <el-input :maxlength="50" v-model="routerModel.start"></el-input>
          </el-form-item>          
        </el-col>
         
        <el-col :span="12">
          <el-form-item prop="finish" label="结束时间">
             <el-input :maxlength="50" v-model="routerModel.finish"></el-input>
          </el-form-item>          
        </el-col> 
         </el-row>
      <el-row>
         <el-col :span="24">
          <el-form-item prop="objective" label="方案目标">
            <el-input :maxlength="50" v-model="routerModel.objective"></el-input>          
          </el-form-item>
        </el-col>
         </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="operator" label="执行人">
            <el-input :maxlength="50" v-model="routerModel.operator"></el-input>          
          </el-form-item>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="饮食干预" name="second">
          <div class="checkScrol">
            <el-table
              height="239"
              ref="multipleTable"
              :data="dietAll"
              @selection-change="handleSelectionChange"
              tooltip-effect="dark"
              style="width: 100%">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                prop="encode"
                label="编码"
                width="120">
              </el-table-column>
              <el-table-column
                prop="foodName"
                label="食品名称"
                width="120">
              </el-table-column>
              <el-table-column
                prop="energy"
                label="卡路里"
                show-overflow-tooltip>
              </el-table-column>
            </el-table>
					</div>
    </el-tab-pane>
    <el-tab-pane label="运动干预" name="third">
          <div class="checkScrol">
            <el-table
              height="239"
              ref="multipleTable2"
              :data="exerciseAll"
              @selection-change="handleSelectionChange2"
              tooltip-effect="dark"
              style="width: 100%">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="encode" label="编码" width="120"> </el-table-column>
              <el-table-column
                prop="pname"
                label="运动名称"
                width="120">
              </el-table-column>
              <el-table-column
                prop="runDuration"
                label="运动时间"
                show-overflow-tooltip>
              </el-table-column>
            </el-table>
					</div>
    </el-tab-pane>
  </el-tabs>
   
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('routerForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { dietList } from '@/api/Lixueseng520/diet'
import { exerciseList } from '@/api/Lixueseng520/exercise'
import { savetherapy,updatetherapy,find,findByid } from '@/api/therapy'

export default {
  name: 'therapy-edit',
  // props: ['parentRouterList'],
  data() {
    return {
      search: {
          encode: "",
          offset: 1,
          limit: 5
        },
      options:[],
      activeName: 'first',
      loading: false,
      routerModel: {
        id: 0,
        filenumber: '',
        name: '',
        sex: '',
        age:'',
        scheme:'',
        start:'',
        finish:'',
        objective:'',
        operator:'',
        diet: {},
        exercise: {},
        lxsExercise:{},
        lxsDiet:{}
      },
      dietAll: {},
      select: {},
      exerciseAll: {},
      dialogProps: {
        visible: false,
        action: '',
        title: ''
      },
      formRules: {
        name: [
          { required: true, message: '请输入患者姓名', trigger: 'blur' },
          { min: 2, max: 32, message: '长度在 2 到 32 个字符', trigger: 'blur' }
        ] ,
        start:[
          {required: true, message: '请输入开始时间'}
        ],
        finish:[{required: true, message: '请输入结束时间'}],
        operator:[{required: true, message: '请输入健康师'}]
      },
      value:'' 
    }
  },
  methods: {
     handleClick(tab, event) {
      if(this.select.length!=undefined){
        if(tab.name=='third'){
          this.routerModel.exercise = {};
         this.exerciseAll.forEach((item,index) => {
          this.select.forEach(it => {
            if(item.id==it.id){
              this.$refs.multipleTable2.toggleRowSelection(this.exerciseAll[index]);
            }
          });
        });     
        }
        if(tab.name=='second'){
          this.routerModel.diet = {};
        this.dietAll.forEach((item,index) => {
          this.select.forEach(it => {
            if(item.id==it.id){
              this.$refs.multipleTable.toggleRowSelection(this.dietAll[index]);
            }
          });
        });
        }
        
        
      }
    },
    handleSelectionChange(val) {
      this.routerModel.lxsDiet = val;
    },
    handleSelectionChange2(val) {
      this.routerModel.lxsExercise = val;
    },
    up(id){
      findByid(id).then(response => {
        this.routerModel.scheme=response.data.title
        this.routerModel.objective=response.data.objective
        this.routerModel.exercise=response.data.exercise
        this.routerModel.diet=response.data.diet
      })
      .catch(error => {
        this.outpuexercise(error)      
      }) 
    },
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs['routerForm'].clearValidate()
        // this.$refs['routerCode'].focus()
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {          
          if(this.dialogProps.action === 'add') {
            this.doSaveRouter()
          } else {
            this.doUpdateRouter()
          }
        } else {
          return false;
        }
      });
    },    
    handleDialogClose() {
      this.dialogProps.visible = false
    },
    doUpdateRouter() {
      this.loading = true
      updatetherapy(this.routerModel.id, this.routerModel)
      .then(response => {
        this.loading = false
        this.dialogProps.visible = false
        this.$emit('save-finished')
      })
      .catch(error => {
        this.outpuexercise(error)      
      })      
    },
    doSaveRouter() {
      this.loading = true
      savetherapy(this.routerModel)
      .then(response => {
        this.loading = false
        this.dialogProps.visible = false
        this.$emit('save-finished')
      })
      .catch(error => {
        this.outpuexercise(error)       
      })      
    },
    outpuexercise(error) {
      console.log(error.response ? error.response : error.message)
      this.loading = false
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })      
    }    
  },
  mounted: function() {
    dietList(this.search)
      .then(response => {
        this.dietAll = response.data.rows;
        exerciseList(this.search)
      .then(response2 => {
        this.exerciseAll = response2.data.rows;
      })
      .catch(error => {
        this.outputError(error)        
      })  
      })
      .catch(error => {
        this.outputError(error)        
      })  
    this.$nextTick(() => {  
      this.$on('openEdittherapyDialog', function(router,diet,exercise) {
         find().then(response => {
          this.options=response.data
      })
      .catch(error => {
        this.outpuexercise(error)       
      }) 
        this.routerModel = router
        this.routerModel.diet=diet
        console.log(diet);
        this.routerModel.exercise=exercise
        this.select=diet
        this.dialogProps.action = 'edit'
        this.dialogProps.title = '制定方案'
        this.dialogProps.visible = true
      })
      this.$on('openAddtherapyDialog', function() {
        this.dialogProps.action = 'add'
        this.dialogProps.title = '添加心理评估'
        this.routerModel = {}
        this.dialogProps.visible = true
      })
    })
  }    
}
</script>

<style lang="scss" scoped>
  .parent-router-select {
    width: 188px;
  }
  .properties-textarea {
    width: 496px;
  }
</style>


